{% extends "index.html" %}

{% block top %}
    <div id="top">
        唯独你没懂
    </div>
{% endblock %}

{% block show %}
<div class="alert alert-primary" role="alert">
    A simple primary alert—check it out!
  </div>
  <div class="alert alert-secondary" role="alert">
    A simple secondary alert—check it out!
  </div>
  <div class="alert alert-success" role="alert">
    A simple success alert—check it out!
  </div>
  <div class="alert alert-danger" role="alert">
    A simple danger alert—check it out!
  </div>
  <div class="alert alert-warning" role="alert">
    A simple warning alert—check it out!
  </div>
  <div class="alert alert-info" role="alert">
    A simple info alert—check it out!
  </div>
  <div class="alert alert-light" role="alert">
    A simple light alert—check it out!
  </div>
  <div class="alert alert-dark" role="alert">
    A simple dark alert—check it out!
  </div>
{% endblock %}  



{% block last %}
<div class="progress">
    <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <div class="progress">
    <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <div class="progress">
    <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <div class="progress">
    <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <div class="progress">
    <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
  </div>

  <!-- 加载 -->
  <div class="spinner-border text-primary" role="status">
    <span class="sr-only">Loading...</span>
  </div>
  <div class="spinner-border text-secondary" role="status">
    <span class="sr-only">Loading...</span>
  </div>
  <div class="spinner-border text-success" role="status">
    <span class="sr-only">Loading...</span>
  </div>
  <div class="spinner-border text-danger" role="status">
    <span class="sr-only">Loading...</span>
  </div>
  <div class="spinner-border text-warning" role="status">
    <span class="sr-only">Loading...</span>
  </div>
  <div class="spinner-border text-info" role="status">
    <span class="sr-only">Loading...</span>
  </div>
  <div class="spinner-border text-light" role="status">
    <span class="sr-only">Loading...</span>
  </div>
  <div class="spinner-border text-dark" role="status">
    <span class="sr-only">Loading...</span>
  </div>


{% endblock %}